import React from 'react'
import './index.scss'

class TodoList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    const { title = 'todoList', dataSource = [], width, centered, onDelete } = this.props

    const todoList = dataSource.filter((i) => !i.status)
    const doneList = dataSource.filter((i) => i.status)
    const showDivideLine = !!(todoList.length && doneList.length)

    const deleteBtn = (id) => (
      <div
        className="red margin4"
        onClick={() => {
          onDelete(id)
        }}
        onKeyUp={() => {}}
      >
        删除
      </div>
    )

    return (
      <div className={`card ${centered ? 'centered' : ''}`} style={{ width, minHeight: '100px' }}>
        <div className="list-header">{title}</div>
        {!dataSource.length && <div className="noData">暂无数据</div>}
        {todoList.map((item) => (
          <div key={item.id} className="list-item">
            <div className="todoIcon" />
            <div className="item-content">{item.name}</div>
            {/* <div className="primaryColor margin4">修改</div> */}
            {deleteBtn(item.id)}
          </div>
        ))}
        {showDivideLine && <div className="divideLine" />}
        {doneList.map((item) => (
          <div key={item.id} className="list-item">
            <div className="doneIcon" />
            <div className="item-content">{item.name}</div>
            {deleteBtn(item.id)}
          </div>
        ))}
      </div>
    )
  }
}

export default TodoList
